<template>
  <div class='list bc-white'>
    <ul>
      <li v-for="(item,index) in formatListData" class="active" :key="index" @click="showDetail(item,index)">
        <p class="title">{{item.theme}} <span class="fr">已申请人数：<span class="color-green">{{item.apply_num}}</span></span> </p>
        <p><span>时间：{{item.date}}</span></p>
        <p><span>地点：{{item.address}}</span></p>
        <p class="request clearB more-info"><span class="fl">介绍：</span><span>{{item.intro||'暂无'}}</span></p>
        <p class="arrow"><img :src="item.isShow?arrow_top:arrow_bottom" alt=""></p>
      </li>
    </ul>
    <p class="no-data" v-if="formatListData.length===0">暂时没有数据哦~</p>
  </div>
</template>
<script>
export default {
  props:['listData','routerDetail'],
  components: {},
  name: "",
  data() {
    return {
      arrow_top:require('../../../../../assets/images/home/arrow-top.png'),
      arrow_bottom:require('../../../../../assets/images/home/arrow-bottom.png'),
    };
  },
  computed:{
    formatListData(){
      return this.listData||[]
    }
  },
  methods: {
    showDetail(item,index){
      this.$set(item,'isShow',!item.isShow)
      item.isShow?$('.more-info').eq(index).slideDown():$('.more-info').eq(index).slideUp()

      // if(this.routerDetail)this.routerDetail(item)
    },
  },
  created() {}
};
</script>
<style lang="scss" scoped>
@import "../../../jobServe/workstudy/model/list.scss";
.list {
  li{
    padding: 20px 30px;
    border-bottom: 1px solid #e4e4e4;
    box-sizing: border-box;

    p{
      font-size: 12px;
      margin-top: 5px;
      color: #666;
    }
    p.title{
      font-size: 16px;
      color:#333;
      line-height: 50px;
      height: 50px;

      >span{
        font-size: 12px;
        color: #666;
      }
    }
    .request span{
      line-height: 40px!important;
    }
  }
}
</style>